<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/ico" href="/images/logo.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

    <!-- Fontawesome -->

    <link rel="stylesheet" href="/css/all.css">


    <link rel="stylesheet" type="text/css" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/bly-icon.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/common.css}" media="all">

    <title th:text="'首页 -'+ ${titleName}"></title>
</head>
<body>


<div class="container-fluid" id="header">
    <div th:replace="user/common::frontheaderhtml"></div>

    <!-- hero section -->
    <div class="container container-first" id="hero">
        <div class="row justify-content-end">
            <div class="col-lg-6 hero-img-container">
                <a href="/blog/single">
                    <div class="hero-img">
                        <img id="firstImg" src="/img/hero-img.png">
                    </div>
                </a>
            </div>
            <div class="col-lg-9">
                <div class="hero-title">
                    <a href="/blog/single">
                        <h1 id="firstTitle"></h1>
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-meta">
                    <p id="fistContent" class="fistContent"></p>
                    <div class="author">
                        <div class="author-img"><img id="firstUserImg" src="/img/author-img.png"></div>
                        <div class="author-meta">
                            <span class="author-name" id="firstUser"></span>
                            <span class="author-tag" id="first"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container mt-2 mb-2 pt-5 pb-5" id="article-grid">
    <div class="row justify-content-center content-center" id="list">

    </div>
</div>


<div class="container text-center pb-3 mb-5">
    <a href="#" class="btn btn-lg btn-light">更多文章</a>
</div>


<!-- Footer section  -->
<footer th:replace="user/common::frontfooterhtml"></footer>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/layui/layui.js"></script>
<script>
    $(function () {
        into();

        function into() {
            $.ajax({
                url: '/article/getData',
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.status != 200) {
                        layer.alert(res.msg);
                        return;
                    }
                    var data = res.data;
                    if (data.first) {
                        $("#firstImg").attr("src", data.first.a_imgUrl);
                        $("#firstTitle").text(data.first.title);
                        $("#fistContent").text(data.first.describe || "");
                        $("#firstUserImg").attr("src", data.first.imgUrl);
                        $("#firstUser").text(data.first.nickName);
                        $(".container-first a").attr('href', '/blog/single/' + data.first.aid);
                    }
                    if (data.list) {
                        var html = "";
                        $.each(data.list, function (i, item) {
                            html += '<div class="col-xl-6 col-lg-12 center-text">' +
                                '    <a href="/blog/single/' + item.aid + '">' +
                                '        <div class="article-card">' +
                                '            <div class="article-img">' +
                                '                <img src="' + item.a_imgUrl + '">' +
                                '            </div>' +
                                '            <div class="article-meta  text-left">' +
                                '                <h2>' + item.title + '</h2>' +
                                '                <p>' + (item.describe || "") + '</p>' +
                                '                <div class="bly-list-info"> <span><i class="iconfont icon-liulanyanjing" title="浏览"></i> ' + (item.browseNum || 0) + ' </span>' +
                                '                <span><i class="iconfont icon-zan" title="赞"></i> ' + (item.praiseNum || 0) + ' </span></div>' +
                                '            </div>' +
                                '        </div>' +
                                '    </a>' +
                                '</div>'
                        })
                        $(".content-center").html(html);
                    }
                }
            })
        }

    })
</script>
</body>
</html>